<!DOCTYPE html>
<html>
<head>
    <title>{$site_info['site_name']}</title>
    <include file="appapi@head"/>
    <link href='__STATIC__/appapi/css/video-js.min.css' type="text/css" rel="stylesheet">
    <link href='__STATIC__/appapi/css/video_share.css' type="text/css" rel="stylesheet">
</head>
<body>
    <div class="section1">
        <div class="jwplayer jw-reset jw-stretch-fill">
            <div class="jw-media jw-reset">
                <div id="videoPlay" style="width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;">
                    <video id="videoHLS" class="video-js vjs-big-play-centered" style="width:100%;"  data-setup="{'preload': 'auto'}" webkit-playsinline  playsinline  x-webkit-airplay="true" x5-video-player-type="h5"  x5-video-player-fullscreen="true" poster="">
                        <source src="{$hls}" type="application/x-mpegURL">
                    </video>
                </div>
                <div id="state" style="text-align:center;line-height:40px;position:absolute;top:35%;z-index:11;color:#fff;padding:20px;display:none;">
                    <h2 style="font-size: 2.5rem;"><if condition="$info['isprivate'] eq 1">
						抱歉，该视频是收费视频，请下载app付费观看...
						</if</h2>
                </div>
                <div class="jw-preview jw-reset" style="background-image: url('{$info['thumb']}')"></div>
            </div>
        </div>
     
        <div class="section1_box" id="section1_box">
            <div class="header clearfix">
                <div class="clearfix">
                    <div class="userinfo">
                        <img src="{$liveinfo['avatar']}" userid="{$liveinfo['id']}">
                        <span class="ulive">{$liveinfo['user_nickname']}</span>
                        <span class="unum">ID：{$liveinfo['id']}</span>
                    </div>
                </div>

            </div>

            <div id="top_box" style="display: none;"></div>
        </div>
        <div class="touchbox" id="touchbox"></div>
        <!-- 下载 -->
        <div class="down-bottom" onclick="down()">
            <img src="__STATIC__/appapi/images/videoshare/down.png">
        </div>
    </div>

    <include file="appapi@footer"/>
    <include file="appapi@scripts"/>
    
    <script type="text/javascript">
		var isiPad = /iPad/i.test(navigator.userAgent);
		var isiPhone = /iPhone|iPod/i.test(navigator.userAgent);
		var isAndroid = /Android/i.test(navigator.userAgent);
		var isWeixin = /MicroMessenger/i.test(navigator.userAgent);
		var isQQ = /QQ/i.test(navigator.userAgent);
		var isIOS = (isiPad || isiPhone);
		var isWeibo = /Weibo/i.test(navigator.userAgent);
		var isApp = (isAndroid || isIOS);

        var videosrc='{$hls}';
        var isprivate="{$info['isprivate']}";
        var myPlayer;
        var h=window.screen.height;
        var videotimer='';

        $(function(){
            videotimer=setTimeout("connectChange()", 1000);
        });

        function connectChange(){
			myPlayer = videojs("videoHLS");
			
			if(isprivate!=1){
				if(videosrc){
					$("#videoPlay").show(); 
					var div='<button id="play"><img src="__STATIC__/appapi/images/videoshare/play.png" width="61"></button>';
					$("#top_box").append(div);
					$("#state").hide();
					myPlayer.height(h);
					myPlayer.show()
					$("#top_box").show();
				}else{
					$("#videoPlay").hide();   
					$("#play").remove();       
					$("#state").show();
					$("#top_box").hide();
					$(".jw-preview").show();
					$(".section1_box .roomtitle").remove();
					clearInterval(videotimer);
					return !1;
				}

				//开始或恢复播放
				myPlayer.on('play', function() {  
					if(document.getElementById('roomtitle')) {
						$("#roomtitle").remove();
					}
					if(isAndroid){
						var html='<div id="roomtitle" class="roomtitle">&nbsp;</div>';
						$(".section1_box .header").prepend(html);
					}
					//myPlayer.height(h);
					$("#top_box").hide();
					$(".jw-preview").hide();

				});
				// 暂停播放
				myPlayer.on('pause', function() { 
					$(".section1_box .roomtitle").remove(); 
					$("#top_box").show();
				});
			}else{
				$("#state h2").html("抱歉，该视频是收费视频，请下载app付费观看....");
                $("#videoPlay").hide();   
				$("#play").remove();       
				$("#state").show();
				$("#top_box").hide();
				$(".jw-preview").show();
				$(".section1_box .roomtitle").remove();
                clearInterval(videotimer);
                return !1;
			}

      }
    </script> 
    
    <script type="text/javascript" src="__STATIC__/appapi/js/video.js"></script>
    <script type="text/javascript" src="__STATIC__/appapi/js/videojs-contrib-hls.js"></script>
    <script>
        var myVideo=document.getElementById("video1");
        
        var Ctrfn={
            play:function(objbtn){
                var myVideo=document.getElementById("videoHLS_html5_api");
                objbtn.parent().hide();
                $(".jw-preview").hide();
                //$(".down-bottom").hide();
                myVideo.play();
            }
        } 
        
        //点击播放按钮
        $(document).on("click","#play",function(){
            var objbtn=$(this);
            Ctrfn.play(objbtn);
        })
    
        function down(){
            if(isIOS){
                location.href="{$site_info['ipa_url']}";
            }else{
                location.href="{$site_info['apk_url']}";
            }
        }

    </script>
</body>
</html>
